<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反馈处理 - 见闻间后台管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <script src="/install/js/vue2.6.11.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
    <script src="/install/js/axios.min.js"></script>
    <script>
        function getUrlParam(name) {
            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
            const r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        axios.interceptors.request.use(
            config => {
                const token = localStorage.getItem('token') || sessionStorage.getItem('token') || getCookie('token');
                if (token) {
                    config.headers['Authorization'] = 'Bearer ' + token;
                }
                return config;
            },
            error => Promise.reject(error)
        );

        function getCookie(name) {
            const value = '; ' + document.cookie;
            const parts = value.split('; ' + name + '=');
            if (parts.length === 2) return parts.pop().split(';').shift();
        }
    </script>
</head>
<body>
    <div id="app" class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{ isEdit ? '意见反馈处理' : '新建反馈' }}</span>
                <el-button 
                    type="primary" 
                    size="small" 
                    style="float: right; margin-top: -5px;"
                    @click="save"
                    :disabled="viewOnly"
                >
                    保存
                </el-button>
            </div>

            <el-form 
                ref="form" 
                :model="formData" 
                label-width="100px"
                :rules="rules"
            >
                <el-form-item label="反馈ID" v-if="isEdit">
                    <el-input v-model="formData.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="反馈用户">
                    <div class="user-info">
                        用户ID：{{ formData.user_id || '-' }}<br>
                        IP地址：{{ formData.ip || '-' }}<br>
                        提交时间：{{ formatTime(formData.create_time) }}
                    </div>
                </el-form-item>

                <el-form-item label="反馈场景" prop="scene">
                    <el-select v-model="formData.scene" disabled>
                        <el-option value="0" label="功能异常"></el-option>
                        <el-option value="1" label="产品建议"></el-option>
                        <el-option value="2" label="违规举报"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="反馈内容" prop="content">
                    <el-input 
                        v-model="formData.content" 
                        type="textarea" 
                        :rows="6" 
                        disabled
                    ></el-input>
                </el-form-item>

                <el-form-item label="相关截图" v-if="formData.images">
                    <el-image 
                        v-for="(img, index) in formData.images" 
                        :key="index" 
                        :src="img" 
                        style="width: 100px; height: 100px; margin-right: 10px;"
                        :preview-src-list="formData.images"
                    ></el-image>
                </el-form-item>

                <el-form-item label="联系方式" v-if="formData.contact">
                    <el-input v-model="formData.contact" disabled></el-input>
                </el-form-item>

                <el-form-item label="处理状态" prop="status">
                    <el-select v-model="formData.status" :disabled="viewOnly">
                        <el-option value="0" label="待处理"></el-option>
                        <el-option value="1" label="已采纳"></el-option>
                        <el-option value="2" label="已忽略"></el-option>
                    </el-select>
                </el-form-item>

              <el-form-item label="处理备注" prop="process_remark">
                    <el-input
                        v-model="formData.process_remark"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入处理备注"
                        :disabled="viewOnly"
                    ></el-input>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

    <style>
        .app-container { padding: 20px; }
        .user-info { line-height: 1.8; }
    </style>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    formData: {
                        id: '',
                        user_id: '',
                        scene: '',
                        content: '',
                        images: '',
                        contact: '',
                        ip: '',
                        status: '',
                        create_time: '',
                        process_remark: ''
                    },
                    isEdit: false,
                    viewOnly: false,
                    rules: {
                        status: [{ required: true, message: '请选择处理状态', trigger: 'change' }],
                        process_remark: [{ required: true, message: '请输入处理备注', trigger: 'blur' }]
                    }
                };
            },
            created() {
                const urlParams = new URLSearchParams(window.location.search);
                this.isEdit = !!urlParams.get('id');
                this.viewOnly = !!urlParams.get('view');
                if (this.isEdit) {
                    this.fetchFeedbackDetail(urlParams.get('id'));
                }
            },
            methods: {
                fetchFeedbackDetail(id) {
                    axios.get(`/admin/science.feedback/detail?id=${id}`)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.formData = response.data.data;
                            }
                        })
                        .catch(error => {
                            this.$message.error('获取数据失败');
                        });
                },
                save() {
                    this.$refs.form.validate(valid => {
                        if (valid) {
                            axios.post(`/admin/science.feedback/process?id=${this.formData.id}`, this.formData)
                                .then(response => {
                                    if (response.data.code === 200) {
                                        this.$message.success('处理成功');
                                        setTimeout(() => window.history.back(), 1500);
                                    }
                                })
                                .catch(error => {
                                    this.$message.error('保存失败');
                                });
                        }
                    });
                },
                formatTime(timestamp) {
                    if (!timestamp) return '-';
                    const date = new Date(timestamp * 1000);
                    return date.toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                }
            }
        });
    </script>
</body>
</html>